<template>
  <PageListContainer class="notice-list">
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="文章类型">
          <el-select v-model="state.params.article_type">
            <el-option v-for="(o, i) in articleTypeOptions" :key="i" :value="o.value" :label="o.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="文章状态">
          <el-select v-model="state.params.status">
            <el-option v-for="(o, i) in statusOptions" :key="i" :value="o.value" :label="o.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="文章标题">
          <el-input v-model="state.params.title" clearable placeholder="请输入文章标题" />
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker
            v-model="state.params._timeArr"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
        <el-form-item label="文章作者">
          <el-input v-model="state.params.author" clearable placeholder="请输入文章作者" />
        </el-form-item>
        <el-form-item label="发布人">
          <el-input v-model="state.params.user_name" clearable placeholder="请输入发布人" />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <k-toolbar>
        <el-button type="primary" @click="onUpdateArticle()">发布文章</el-button>
      </k-toolbar>
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #cover="s">
          <div v-if="s.row.cover?.length" class="cover-wrapper">
            <img :src="s.row.cover" width="160" alt="cover" />
          </div>
        </template>
        <template #title="{ row }">
          <el-link type="primary" :href="genJumpDetail(row)" target="_blank">
            <EllipsisText :content="row.title" width="220" show-tooltip />
          </el-link>
        </template>
        <template #status="{ row }">
          <div :style="{ color: statusStyleMap[row.status] ?? '#909399' }">{{ row.status }}</div>
        </template>
        <template #actions="s">
          <el-link type="primary" @click="onUpdateArticle(s.row)">编辑</el-link>
          <el-link type="warning" @click="onClickChangeStatus(s.row)">{{ s.row.is_ban ? '上架' : '下架' }}</el-link>
          <el-link type="danger" @click="onClickDel(s.row)">删除</el-link>
        </template>
      </k-table>
    </div>
  </PageListContainer>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { del, changeStatus } from '@/api/crm-content/article';
import { articleTypeOptions, statusOptions, useTableList, statusStyleMap } from './hooks/use-table';
import { useDel, baseConfirm } from '@crud/index';
import { AuthCode, hasPermission } from '@/modules/auth';
import configs from '@/config';

import EllipsisText from '@/components/base-ellipsis-text/index.vue';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({ name: 'ContentArticleList' });
const router = useRouter();
const { state, tableState, tableEvent, ...methods } = useTableList();

const { onClickDel: delFunc } = useDel({
  confirm: { title: '删除文章', message: '确定要删除该文章吗?' },
  del: async (data: any) => {
    await del(data.id);
    methods.getList();
  }
});

const onUpdateArticle = (row?: any) => {
  if (hasPermission(AuthCode.CONTENT_ARTICLE_CREATE)) {
    router.push({ name: 'ContentArticleAdd', query: { type: row ? 'edit' : 'create', id: row?.id ?? 0 } });
  }
};
const onClickChangeStatus = async (row: any) => {
  const handle = row.is_ban ? '上架' : '下架';
  await baseConfirm({ title: `${handle}文章`, message: `确定要${handle}该文章吗` });
  await changeStatus({ id: row.id, is_ban: row.is_ban ? 0 : 1 });
  ElMessage.success('操作成功');
  methods.getList();
};
const onClickDel = (row) => {
  if (hasPermission(AuthCode.CONTENT_ARTICLE_DEL)) {
    delFunc(row);
  }
};
/** 生成跳转代码 */
const genJumpDetail = (row) => {
  const { id, status } = row;
  /** 仅支持已发布的文章可预览 */
  return status === '已发布' ? `${configs.kgjDomain}/information/articleDetail/${id}?isPreview=true` : 'javascript:;';
};
</script>
<style lang="scss">
.cover-wrapper {
  width: 160px;
}
</style>
